<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			#d1 {
				width: 800px;
				height: 800px;
				border: 1px solid #ccc;
				position: relative;
				background: #fafafa;
			}
			
			#d1>div {
				width: 130px;
				height: 30px;
				border: 1px solid #ccc;
				border-radius: 8px;
				position: absolute;
				z-index: 2;
				text-align: center;
				line-height: 30px;
				background: #fff;
			}
			
			#d1>svg {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 1
			}
			
			.input .point {
				position: absolute;
				border: 6px solid transparent;
				border-top: 6px solid #ccc;
				top: 0px;
				left: 58px;
			}
			
			.input .circle {
				position: absolute;
				width: 10px;
				height: 10px;
				border: 1px solid #ccc;
				top: -7px;
				left: 60px;
				border-radius: 50%;
				background: #fff;
			}
			
			.output .circle {
				position: absolute;
				width: 10px;
				height: 10px;
				border: 1px solid #ccc;
				bottom: -7px;
				left: 60px;
				border-radius: 50%;
				background: #fff;
				cursor: crosshair;
			}
			
			.output .circle:hover {
				background: #FC9901;
			}
		</style>
		<script src="https://unpkg.com/vue"></script>

	</head>

	<body>
		<div id="item">
			<input type="text" v-model="editItem" @keyup.enter="getNewItem()" />
			<div>{{newItem}}</div>
			<ul class="shuiguo">
				<li draggable="true" data-name="apple">苹果</li>
				<li draggable="true" data-name="bnana">香蕉</li>
				<li draggable="true" data-name="pineapple">菠萝</li>
				<li draggable="true" data-name="Mango">芒果</li>
				<li draggable="true" data-name="watermelon">西瓜</li>
			</ul>
		</div>

		<div id="d1">
			<svg></svg>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript">
			var example = new Vue({
				el: '#item',
				data: {
					editItem: "",
					newItem: "",
				},
				methods: {
					getNewItem: function() {
						this.newItem = this.editItem;
						this.editItem = "";
					},
				}
			});
		</script>
		<script type="text/javascript">
			var dragData = [];

			function reload() {
				$(function() {
					var html = "";
					var g = "";
					if($('svg').siblings()) {
						var prev = $('svg').siblings();
						for(var i = 0; i < prev.length; i++) {
							prev[i].remove();
						}
					}
					for(var i = 0; i < dragData.length; i++) {
						console.log(dragData[i]);
						if(dragData[i] != undefined) {
							var data = dragData[i];
							html +=
								`
                            <div class = "${data.name}" data-id = "${data.id}" data-inx = "${data.inx}" data-iny = "${data.iny}" data-label = "${data.label}" ondragstart = "insideDrag(this)"  draggable = "true" style = "transform:translate(${data.x}px,${data.y}px)">
                                <span class = "${data.icon}" data-id = "${data.id}"></span>
                                <span data-id = "${data.id}">${data.label}</span>
                                <div class = "input">
                                    <span class = "point" style = "display:${data.point}"></span>
                                    <span class = "circle" title = "输入" style = "display:${data.circle}"></span>
                                </div>
                                <div class = "output">
                                    <span class = "circle" title = "输出" onmousedown = "noDrag(this)" onmouseup = "addDrag(this)" onmouseleave = "draw(this)" onmouseenter = "noMove()" data-id = "${data.id}"></span>
                                </div>
                            </div>  
                        `
							if(data.link.length > 0) {
								for(var j = 0; j < data.link.length; j++) {
									g +=
										`
                                        <g class = "${data.link[j].name}">
                                            <path d = "M${data.outx} ${data.outy} Q${data.link[j].mx1} ${data.link[j].my1} ${data.link[j].mx2} ${data.link[j].my2} T${data.link[j].dx} ${data.link[j].dy}" stroke = "#CCCCCC" fill = "none" style = "stroke-width: 1px;"/>
                                        </g>
                                    `
								}
							}
						}
					}
					$('svg').before(html);
					$('svg').html(g);
					console.log($('svg').siblings());
				})
			}
			//reload();
			document.getElementById('d1').ondragover = function(e) {
				e.preventDefault();
			}
			var dWidth = Number($('#d1').css('width').slice(0, -2));
			console.log(dWidth);
			var dHeight = Number($('#d1').css('height').slice(0, -2));
			console.log(dHeight);
			var dClient = $("#d1").offset().top;
			var dLeft = $("#d1").offset().left;
			console.log('顶部位置', dClient);
			console.log('左边位置', dLeft);

			function drag(word, name, type, id) {
				console.log(type);
				console.log(name);
				document.getElementById('d1').ondrop = function(e) {
					console.log('e.target', e.target.dataset.id);
					var x;
					var y;
					console.log('e.clientX', e.clientX);
					console.log('e.clientY', e.clientY);
					if((dWidth - e.clientX + dLeft + 65) >= 132) {
						x = e.clientX - 65 - dLeft;
					} else {
						x = dWidth - 133;
					}
					if((e.clientX - 65 - dLeft) < 65) {
						x = 1;
					}
					if((dHeight - e.clientY + dClient + 15) >= 33) {
						y = e.clientY - 15 - dClient;
					} else {
						y = dHeight - 33;
					}
					if(e.clientY - 15 - dClient < 0) {
						y = 1;
					}
					if(type == "outside") {
						console.log('放下了');
						dragData.push({
							id: dragData.length,
							label: word,
							name: name,
							x: x,
							y: y,
							outx: x + 68,
							outy: y + 30,
							inx: x + 65,
							iny: y - 1,
							link: [],
							linked: [],
							dx: 0,
							dy: 0,
							mx1: 0,
							my1: 0,
							mx2: 0,
							my2: 0,
							style: name,
							point: "none",
							circle: "inline-block",
							draw: false,
							icon: name + "Icon"
						});
						console.log(dragData);
						reload();
					}
					if(type == "inside") {
						console.log(word, name, type, id);
						for(var i = 0; i < dragData.length; i++) {
							if(id == dragData[i].id) {
								dragData[i].x = x;
								dragData[i].y = y;
								dragData[i].outx = dragData[i].x + 68;
								dragData[i].outy = dragData[i].y + 30;
								dragData[i].inx = dragData[i].x + 65;
								dragData[i].iny = dragData[i].y - 1;
								console.log('dragData[i].link', dragData[i].link);
								for(let j = 0; j < dragData[i].link.length; j++) {
									dragData[i].link[j].linkId = parseFloat(dragData[i].link[j].name.split("|")[1]);
								}
								for(var k = 0; k < dragData[i].linked.length; k++) {
									console.log('dragData[i].linked[k]', dragData[i].linked[k]);
									for(let j = 0; j < dragData.length; j++) {
										if(dragData[i].linked[k].linkedNum == dragData[j].id) {
											console.log('ID一样了啊');
											for(let m = 0; m < dragData[j].link.length; m++) {
												if(dragData[i].linked[k].name == dragData[j].link[m].name) {
													console.log("名字一样了啊");
													dragData[j].link[m].dx = dragData[i].inx;
													dragData[j].link[m].dy = dragData[i].iny;
													dragData[j].link[m].mx1 = dragData[j].outx;
													dragData[j].link[m].my1 = dragData[j].link[m].dy > dragData[j].outy ? dragData[j].outy + (dragData[j].link[m].dy - dragData[j].outy) / 4 : dragData[j].outy - (dragData[j].link[m].dy - dragData[j].outy) / 4;
													dragData[j].link[m].mx2 = dragData[j].outx + (dragData[j].link[m].dx - dragData[j].outx) / 2,
														dragData[j].link[m].my2 = dragData[j].outy + (dragData[j].link[m].dy - dragData[j].outy) / 2
												}
											}
										}
									}
								}
								if(dragData[i].link.length > 0) {
									for(var j = 0; j < dragData[i].link.length; j++) {
										dragData[i].link[j].mx1 = dragData[i].outx;
										dragData[i].link[j].my1 = dragData[i].link[j].dy > dragData[i].outy ? dragData[i].outy + (dragData[i].link[j].dy - dragData[i].outy) / 4 : dragData[i].outy - (dragData[i].link[j].dy - dragData[i].outy) / 4;
										dragData[i].link[j].mx2 = dragData[i].outx + (dragData[i].link[j].dx - dragData[i].outx) / 2,
											dragData[i].link[j].my2 = dragData[i].outy + (dragData[i].link[j].dy - dragData[i].outy) / 2
									}
								}
							}
						}
						reload();
					}
				}
			}
			var shuiguo = $('.shuiguo li');
			console.log(shuiguo);
			for(var i = 0; i < shuiguo.length; i++) {
				console.log(shuiguo[i]);
				shuiguo[i].ondragstart = function() {
					console.log('东完了')
					drag(this.innerHTML, this.dataset.name, 'outside');
				}
			}

			function insideDrag(item) {
				console.log(item);
				drag(item.dataset.label, item.className, 'inside', item.dataset.id);
			}

			function noDrag(item) {
				console.log(item.parentNode.parentNode);
				item.parentNode.parentNode.setAttribute('draggable', false);
				var parent = item.parentNode.parentNode;
				for(var i = 0; i < dragData.length; i++) {
					if(parent.dataset.id == dragData[i].id) {
						dragData[i].draw = true;
						dragData[i].link.push({
							name: parent.dataset.id + parent.className,
							dx: 0,
							dy: 0,
							mx1: 0,
							my1: 0,
							mx2: 0,
							my2: 0
						});
						$('body').on('mouseup', function(e) {
							// console.log('item.parentNode.parentNode',item.parentNode.parentNode);
							for(var j = 0; j < dragData.length; j++) {
								if(parent.dataset.id == dragData[j].id) {
									console.log('页面抬起了');
									dragData[j].draw = false;
									console.log(e.target.title);
									console.log(e.target.parentNode.parentNode);
									console.log(e.target.parentNode.parentNode.dataset.id);
									if(e.target.title) {
										if(e.target.title == "输入") {
											$('svg').unbind('mousemove');
											dragData[j].link[dragData[j].link.length - 1].name = dragData[j].link[dragData[j].link.length - 1].name + "|" + e.target.parentNode.parentNode.dataset.id + e.target.parentNode.parentNode.className;
											dragData[j].link[dragData[j].link.length - 1].dx = Number(e.target.parentNode.parentNode.dataset.inx);
											dragData[j].link[dragData[j].link.length - 1].dy = Number(e.target.parentNode.parentNode.dataset.iny);
											for(let i = 0; i < dragData.length; i++) {
												if(e.target.parentNode.parentNode.dataset.id == dragData[i].id) {
													dragData[i].linked.push({
														name: dragData[j].link[dragData[j].link.length - 1].name,
														linkedNum: parseFloat(dragData[j].link[dragData[j].link.length - 1].name)
													})
													dragData[i].circle = "none";
													dragData[i].point = "inline-block";
												}
											}

										} else {
											dragData[j].link.splice(dragData[j].link.length - 1, 1);
											$('svg').unbind('mousemove');
											reload();
										}
									} else {
										dragData[j].link.splice(dragData[j].link.length - 1, 1);
										$('svg').unbind('mousemove');
									}
									reload();
								}
							}
							$('body').unbind('mouseup');
						})
						//reload();
					}
				}
			}

			function addDrag(item) {
				item.parentNode.parentNode.setAttribute('draggable', true);
				var parent = item.parentNode.parentNode;
				for(var i = 0; i < dragData.length; i++) {
					if(parent.dataset.id == dragData[i].id) {
						dragData[i].draw = false;
						console.log(dragData[i]);
					}
				}
			}

			function draw(item) {
				item.parentNode.parentNode.setAttribute('draggable', true);
				var parent = item.parentNode.parentNode;
				for(var i = 0; i < dragData.length; i++) {
					if(parent.dataset.id == dragData[i].id) {
						if(dragData[i].draw == true) {
							$('svg').mousemove(function(e) {
								console.log(parent.dataset.id);
								for(var i = 0; i < dragData.length; i++) {
									if(parent.dataset.id == dragData[i].id) {
										console.log(dragData[i]);
										// dragData[i].link.push({
										//  name:"nihao",
										//  dx:e.offsetX,
										//  dy:e.offsetY,
										//  mx1:dragData[i].outx,
										//  my1:dragData[i].dy > dragData[i].outy?dragData[i].outy + (dragData[i].dy-dragData[i].outy)/4:dragData[i].outy - (dragData[i].dy-dragData[i].outy)/4,
										//  mx2:dragData[i].outx + (dragData[i].dx-dragData[i].outx)/2,
										//  my2:dragData[i].outy +(dragData[i].dy-dragData[i].outy)/2

										// });
										if(dragData[i].link[dragData[i].link.length - 1]) {
											dragData[i].link[dragData[i].link.length - 1].dx = e.offsetX;
											dragData[i].link[dragData[i].link.length - 1].dy = e.offsetY;
											dragData[i].link[dragData[i].link.length - 1].mx1 = dragData[i].outx;
											dragData[i].link[dragData[i].link.length - 1].my1 = dragData[i].dy > dragData[i].outy ? dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 4 : dragData[i].outy - (dragData[i].dy - dragData[i].outy) / 4;
											dragData[i].link[dragData[i].link.length - 1].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2,
												dragData[i].link[dragData[i].link.length - 1].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2
										}
										//////////////////////////////////////////////
										dragData[i].dx = e.offsetX;
										dragData[i].dy = e.offsetY;
										dragData[i].mx1 = dragData[i].outx;
										if(dragData[i].dy > dragData[i].outy) {
											dragData[i].my1 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 4;
										} else {
											dragData[i].my1 = dragData[i].outy - (dragData[i].dy - dragData[i].outy) / 4;
										}
										dragData[i].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2
										dragData[i].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2
									}
								}
								reload();
								console.log(2333);
							})
						} else {
							$('svg').unbind('mousemove');
						}

					}
				}
			}

			function noMove() {
				$('svg').unbind('mousemove');
			}
			$('svg').mouseup(function(e) {
				console.log(e.target);
				$('svg').unbind('mousemove');
				for(var i = 0; i < dragData.length; i++) {
					dragData[i].draw = false;
				}
				console.log('起来了');
			})
			// $('body').mouseup(function(e){
			//  console.log('页面抬起了');
			//  console.log(e.target.title);
			//  if(e.target.title){
			//      if(e.target.title == "输入"){
			//          $('svg').unbind('mousemove');
			//      }
			//  }
			// })
		</script>
	</body>

</html>